<script setup>
import {reactive} from "vue";
import {Search} from "@element-plus/icons-vue";
import request from "@/utils/request";
import {ElMessage, ElMessageBox} from "element-plus";

/**
 * 本地存储的账户信息
 *
 * @type {any}
 */
const account = JSON.parse(localStorage.getItem('account-info') || '{}')

/**
 * 是否是修改的判断
 *
 * @type {boolean}
 */
let isEdit = false

/**
 * 课程数据
 *
 * @type {UnwrapNestedRefs<{courseName: string, total: number, form: {courseIntroduction: string, courseName: string, courseNo: string, courseCreateMan: string, courseTextbook: string, courseUpdateTime: string, courseCreateTime: string, courseUpdateMan: string}, formVisible: boolean, pageSize: number, tableData: *[], pageNum: number}>}
 */
const courseData = reactive({
  courseName: '',
  tableData: [],
  total: 0,
  pageSize: 5,
  pageNum: 1,
  formVisible: false, // 是否显示弹窗
  form: {
    courseNo: '',
    courseName: '',
    courseIntroduction: '',
    courseTextbook: '',
    courseCreateMan: '',
    courseCreateTime: '',
    courseUpdateMan: '',
    courseUpdateTime: '',
  }
})

/**
 * 加载课程
 */
const loadCourse = () => {
  request.get(`/api/course/find-course-page`, {
    params: {
      pageNum: courseData.pageNum,
      pageSize: courseData.pageSize,
      courseName: courseData.courseName,
    }
  }).then(res => {
    courseData.tableData = res.data?.list || []
    courseData.total = res.data?.list.map(item => item.courseCountNumber)[0] || 0;
  })
}
// 调用课程加载方法，获取后台数据
loadCourse()

/**
 * 翻页
 */
const handelCurrentChange = () => {
  // 翻页时，重新加载数据即可
  loadCourse()
}

/**
 * 重置
 */
const reset = () => {
  courseData.courseName = ''
  // 重置时，重新加载数据即可
  loadCourse()
}

/**
 * 新增课程
 */
const addCourse = () => {
  isEdit = false
  // 清空上次残留的数据
  courseData.form = {}
  courseData.formVisible = true
}

/**
 * 提交新增的课程
 */
const submitAddCourse = () => {
  if (account.accountRoleName === 'visitor-admin') {
    ElMessage.info("游客-管理员仅可以查看信息")
  } else {
    courseData.form.courseCreateMan = account.accountNo
    request.post(`/api/course/add-course`, courseData.form).then(res => {
      if (res.code === "200") {
        // 重新获取数据
        loadCourse()
        // 关闭弹窗
        courseData.formVisible = false
        ElMessage.success("新增成功")
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
}

/**
 * 修改课程
 *
 * @param row 按行修改
 */
const editCourse = (row) => {
  isEdit = true
  courseData.form = JSON.parse(JSON.stringify(row))
  courseData.formVisible = true
}

/**
 * 提交修改的订单班
 */
const submitEditCourse = () => {
  if (account.accountRoleName === 'visitor-admin') {
    ElMessage.info("游客-管理员仅可以查看信息")
  } else {
    courseData.form.courseUpdateMan = account.accountNo
    request.put(`/api/course/update-course`, courseData.form).then(res => {
      if (res.code === "200") {
        // 重新获取数据
        loadCourse()
        // 关闭弹窗
        courseData.formVisible = false
        ElMessage.success("编辑成功")
      } else {
        ElMessage.error(res.msg)
      }
    })
  }
}

/**
 * 删除课程
 *
 * @param courseNo 课程号
 */
const deleteCourse = (courseNo) => {
  ElMessageBox.confirm("删除数据后无法恢复，您确认删除此条数据？", "删除确认", {type: 'warning'}).then(() => {
    if (account.accountRoleName === 'visitor-admin') {
      ElMessage.info("游客-管理员仅可以查看信息")
    } else {
      request.delete(`/api/course/delete-course/${courseNo}`).then(res => {
        if (res.code === "200") {
          // 重新获取数据
          loadCourse()
          ElMessage.success("删除成功")
        } else {
          ElMessage.error(res.msg)
        }
      })
    }
  }).catch(() => {
    ElMessage({
      type: "info",
      message: "取消删除",
    })
  })
}
</script>

<template>
  <div v-if="account.accountRoleName === 'system-admin' || account.accountRoleName === 'visitor-admin'">
    <div class="card" style="margin-bottom: 10px;">
      <el-input v-model="courseData.courseName" :prefix-icon="Search"
                placeholder="请输入课程名称查询"
                style="width: 300px; margin-right: 10px;"/>
      <el-button style="margin-left: 10px;" type="primary" @click="loadCourse">查询</el-button>
      <el-button type="info" @click="reset">重置</el-button>
    </div>
    <div class="card" style="margin-bottom: 10px;">
      <div>
        <el-button style="margin-bottom: 10px;" type="primary" @click="addCourse">新增</el-button>
      </div>
      <div>
        <el-table :data="courseData.tableData" style="width: 100%">
          <el-table-column label="课程号" prop="courseNo"/>
          <el-table-column label="课程名" prop="courseName"/>
          <el-table-column label="课程教材" prop="courseTextbook"/>
          <el-table-column label="创建人" prop="courseCreateMan"/>
          <el-table-column label="创建时间" prop="courseCreateTime"/>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button plain size="small" type="primary" @click="editCourse(scope.row)">编辑
              </el-button>
              <el-button plain size="small" type="danger"
                         @click="deleteCourse(scope.row.courseNo)">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="card">
      <el-pagination v-model:current-page="courseData.pageNum"
                     v-model:page-size="courseData.pageSize"
                     :total="courseData.total"
                     background layout="prev, pager, next" @current-change="handelCurrentChange"/>
    </div>

    <el-dialog v-model="courseData.formVisible" :close-on-click-modal="false" title="课程信息">
      <el-form v-if="isEdit === false" :model="courseData.form" label-position="right"
               label-width="100px" style="padding-right: 30px;">
        <el-form-item label="课程号">
          <el-input v-model="courseData.form.courseNo" autocomplete="off"
                    placeholder="请输入课程号"></el-input>
        </el-form-item>
        <el-form-item label="课程名">
          <el-input v-model="courseData.form.courseName" :maxlength="20" autocomplete="off"
                    placeholder="请输入课程名"></el-input>
        </el-form-item>
        <el-form-item label="课程教材">
          <el-input v-model="courseData.form.courseTextbook" :maxlength="20" autocomplete="off"
                    placeholder="请输入课程教材"></el-input>
        </el-form-item>
        <el-form-item label="课程介绍">
          <el-input
              v-model="courseData.form.courseIntroduction"
              :autosize="{ minRows: 4, maxRows: 8 }"
              :maxlength="150"
              placeholder="字数不得超过150字"
              type="textarea"
          />
        </el-form-item>
      </el-form>

      <el-form v-if="isEdit === true" :model="courseData.form" label-position="right"
               label-width="100px" style="padding-right: 30px;">
        <el-form-item label="课程号">
          <el-input v-model="courseData.form.courseNo" autocomplete="off"
                    disabled placeholder="请输入课程号"></el-input>
        </el-form-item>
        <el-form-item label="课程名">
          <el-input v-model="courseData.form.courseName" :maxlength="20" autocomplete="off"
                    placeholder="请输入课程名"></el-input>
        </el-form-item>
        <el-form-item label="课程教材">
          <el-input v-model="courseData.form.courseTextbook" :maxlength="20" autocomplete="off"
                    placeholder="请输入课程教材"></el-input>
        </el-form-item>
        <el-form-item label="课程介绍">
          <el-input
              v-model="courseData.form.courseIntroduction"
              :autosize="{ minRows: 4, maxRows: 8 }"
              :maxlength="200"
              placeholder="字数不得超过200字"
              type="textarea"
          />
        </el-form-item>
      </el-form>
      <template #footer>
                <span class="dialog-footer">
                    <el-button @click="courseData.formVisible = false">取消</el-button>
                    <el-button v-if="isEdit === false" type="primary" @click="submitAddCourse">提交</el-button>
                    <el-button v-if="isEdit === true" type="primary" @click="submitEditCourse">提交</el-button>
                </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>

</style>
